<template>
  <div class='tab_bar'>
    <!-- LOGO和主要跳转的地方 -->
    <div>
      <!-- 头部 -->
      <slot name='item-top'></slot>
    </div>

    <div style='margin-left: -150px'>
      <ul>
        <!-- 中间核心部分 -->
        <slot name='item-body'></slot>
      </ul>
    </div>

    <!-- 尾巴 -->
    <div style='display:flex;'>
      <slot name='item-foot'></slot>
      <!-- 自定义组件部分-最下方 -->
      <slot name='item-head'></slot>
    </div>
  </div>
</template>

<script lang='ts'>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'NavBar',
  props: {
    logoImg: {
      type: String,
      // default: 'https://xk857.com/jianxiao/jianxiao.png'
      default: 'https://xk857.com/typora/2021/05jianlogo.png'
    }
  }
})
</script>

<style scoped>
.tab_bar {
  background: var(--bg-primary);
  width: 100vw;
  height: 50px;
  box-shadow: 0 1px 3px var(--tab-bar-shadow);
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  z-index: 999;
}

li {
  list-style: none;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
}
</style>
